<template>
    <div>
        <el-dialog title="商品类别" v-dialogdrag=" { target:'.el-dialog__header',container:'.el-dialog',border:'.el-dialog__wrapper'}" class="noselect"  :close-on-click-modal="false" :visible.sync="showDialog" :before-close="handleClose">
            <div style="margin: 20px;"></div>
            <el-form :model="modelForm" ref="modelForm" label-width="100px" class="demo-ruleForm ">
                <!--<el-form-item label=" " prop="no" :rules="[-->
                     <!--{ required: true, message: '请输入商品单位编码', trigger: 'blur' },-->
                     <!--{ min: 1, max: 2, message: '长度在 1 到 2 个字符', trigger: 'blur' }-->
                <!--]">-->
                    <!--<el-input type="text" v-model="modelForm.no" auto-complete="off" placeholder="请输入单位编码" :disabled="isEdit"  :maxlength="2" size="medium">-->
                        <!--<template slot="prepend">-->
                            <!--<el-tooltip placement="top" content="（此项只能填两位数字编码,不能重复.例如 :01,02...99）">-->
                                <!--<el-button tabIndex="-1">单位编码</el-button>-->
                            <!--</el-tooltip>-->
                        <!--</template>-->
                    <!--</el-input>-->
                <!--</el-form-item>-->
                <el-form-item label=" " prop="name" :rules="[{ required: true, message: '请输入单位名称', trigger: 'blur' },{max: 32, message: '长度最长32个字符', trigger: 'blur' }]">
                    <el-input type="text"  v-model="modelForm.name" auto-complete="off" placeholder="请输入单位名称" :disabled="isPack"  :maxlength="32" size="medium">
                        <template slot="prepend">
                            <el-tooltip placement="top" content="（此项为必填项，不能填写已有的单位名称！）">
                                <el-button  tabIndex="-1">单位名称</el-button>
                            </el-tooltip>
                        </template>
                    </el-input>
                </el-form-item>
                <!--<el-form-item  prop="nameEn" :rules="[]">-->
                    <!--<el-input type="text" v-model="modelForm.nameEn" auto-complete="off" placeholder="请输入菜类英文名"  :maxlength="32" size="medium">-->
                        <!--<template slot="prepend">-->
                            <!--<el-tooltip placement="top" content="（请填写对应的英文名称，非必填！）">-->
                                <!--<el-button  tabIndex="-1">英文名称</el-button>-->
                            <!--</el-tooltip>-->
                        <!--</template>-->
                    <!--</el-input>-->
                <!--</el-form-item>-->
                <!-- <el-form-item  prop="state" :rules="[]">
                    <el-radio-group v-model="modelForm.state">
                        <el-radio label="NORMAL">正常</el-radio>
                        <el-radio label="DISABLED">禁用</el-radio>
                    </el-radio-group>
                </el-form-item> -->
            </el-form>
            <div class="foot-bar-button">
                <el-button type="primary" @click="submitForm('modelForm')" size="medium">提交</el-button>
                <el-button @click="resetForm('modelForm')" size="medium">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    //注意路径
    export default{
        props: ['isShow','id'],  //参数
        data(){
            return {
                modelForm: {
                    no:"",
                    name:"",

                },
                 showDialog:false,
                 activityId:"",
                 isSave:true,
                 isPack:false,
                isEdit:false,
                priceupType:[],
              storeId:window.localStorage.getItem("dishKuId")
            };
        },
        watch:{
            isShow:function(newValue,oldValue){
                this.showDialog=newValue;
                if(newValue) {
                    if (this.id != '') {
                        this.isEdit=true;
                        if(this.id==5){
                            this.isPack=true;
                         }else{
                            this.isPack=false;
                        }
                        this.activityId = this.id;
                        this.isSave = false;
                        this.$axios.get("dishes/dishesUnits/" + this.activityId + "/update?storeId="+this.storeId).then(data=> {
                            // if (data.body.content.dishesCategory.state) {
                            //     data.body.content.dishesCategory.state = data.body.content.dishesCategory.state.key
                            // }
                            this.modelForm = data.content.dishesUnit;
                            console.log( this.modelForm );

                        });
                    } else {
                        this.isEdit=false;
                        this.isSave = true;
                        this.$axios.get("dishes/dishesUnits/create?storeId="+this.storeId).then(data=> {
                            this.modelForm = data.content.dishesUnit;
                        });
                    }
                }
            }
        },

        created(){
            window.this = this;
        },
        methods: {
            goBack() {
                this.router.go(-1);
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                      this.modelForm.storeId=this.storeId;
                        if(this.isSave){
                            this.$axios.post("dishes/dishesUnits/create",this.modelForm).then(data=>{
                                if(data.status==200){
                                    this.$message({
                                        message:data.message,
                                        type: 'success'
                                    });
                                    this.$emit('addSuccess');
                                }else{
                                    this.$message.error(data.message);
                                }
                            })
                        }else{
                            this.modelForm._method="PUT";
                            this.$axios.put("dishes/dishesUnits/"+this.activityId+"/update",this.modelForm).then(data=>{
                                if(data.status==200){
                                    this.$message({
                                        message:data.message,
                                        type: 'success'
                                    });
                                    this.$emit('addSuccess');
                                }else{
                                    this.$message.error(data.message);
                                }
                            });
                        }
                    } else {
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$emit('close');
                this.$refs[formName].resetFields();
                this.showDialog=false;
            },
            handleClose(done){
                        this.$emit('close');
                        done();
            }
        }
    }
</script>
<style scoped>

</style>
